<template>
    <el-container>
        <el-header><b></b>小缘平台</el-header>
        <el-main>
            <el-form :model="userForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="账号" :label-width="formLabelWidth" prop="aname">
                    <el-input placeholder="请输入账号" v-model="userForm.aname" autocomplete="off" clearable></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth" prop="apass">
                    <el-input placeholder="请输入密码" v-model="userForm.apassword" autocomplete="off" show-password></el-input>
                </el-form-item>
                <el-row>
                    <el-button id="loginBtn" type="primary" @click="login()">登录</el-button>
                    <el-button id="registBtn" type="warning" @click="Useregistry()">注册</el-button>
                </el-row>
            </el-form>
        </el-main>
    </el-container>
</template>

<script>
    export default {
        name: "Join",
        data() {
            return {
                userForm:{},                    //用户对象
                formLabelWidth:"50px",          //label宽度
                rules: {                         //校验规则
                    aname: [{required: true, message: '用户名不能为空!', trigger: 'blur'}],
                    apass: [{required: true, message: '密码不能为空!', trigger: 'blur'}],
                },
            }
        },
        created() {

        },
        methods:{
            login(){
                this.$refs['ruleForm'].validate(valid=>{//valid: true:代表表单中所有的控件都验证通过，只要有一个不通过就是false
                    if (valid){
                        this.axios.post(`/index`,JSON.stringify(this.userForm)).then(data=>{
                            if (data=200){
                                this.$router.push('/Index');
                            }else {
                                this.$message({
                                    message: `登录失败`,
                                    type: 'error',
                                });
                            }
                        })
                    }
                })
            }
        },
    }

</script>

<style scoped>
    .el-header{
        margin: 0 auto;
        background-color: #B3C0D1;
        color: #333;
        text-align: center;
        line-height: 60px;
        width: 300px;
    }

    .el-main {
        margin: 0 auto;
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 60px;
        width: 300px;
    }
    #loginBtn,#registBtn{
        margin:0 30px;
    }
    body > .el-container {
        margin-bottom: 40px;
    }

</style>